<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()

const toggleDark = useToggle(isDark)
</script>

<template>
  <header h18 px8 py4 flex justify-between fixed top-0 left-0 right-0 bottom-0>
    <div></div>
    <div grid gap4 grid-auto-flow-col text-5 justify-items-center items-center>
      <a href="/" c-op-70 hover:c-op-100 text-4 class="!c-trueGray">Blog</a>
      <a
        href="https://marketplace.visualstudio.com/search?term=BaiLin&target=VSCode&category=All%20categories&sortBy=Relevance"
        c-op-70
        hover:c-op-100
        text-4
        class="!c-trueGray"
        i-akar-icons:vscode-fill
      ></a>
      <a
        href="https://github.com/lovebailin"
        i-ph:github-logo-bold
        c-op-70
        hover:c-op-100
        class="!c-trueGray"
      ></a>

      <div
        dark:i-ic:outline-light-mode
        i-ic:baseline-brightness-2
        cursor-pointer
        @click="toggleDark(!isDark)"
        c-op-70
        hover:c-op-100
        c-trueGray
      ></div>
    </div>
  </header>
  <header h18></header>
</template>

<style scoped>
@media screen and (max-device-width: 880px) {
  header {
    position: relative !important;
  }
  header:nth-child(2) {
    display: none;
  }
}
</style>
